import {defineComponent, PropType, ref} from "vue";
import CdlForm from "@/components/form/index"
import Style from "@/styles/components/search.module.css"
import {ElButton} from "element-plus"
import {FormTree} from "@/interfaces/components/Form";
import {FormData} from "@/interfaces/components/Page";
import {cloneDeep} from "lodash";

export default defineComponent({
    name: "CdlSearch",
    props: {
        templateTree: {
            type: Object as PropType<FormTree<any>>,
            required: true
        },
        model: {
            type: Object as PropType<FormData<any>>,
            required: true
        }
    },
    emits: ["submit"],
    setup(props, {emit, slots}){
        const cdlForm = ref()
        /**
         * 重置数据
         */
        function resettingHandle(){
            cdlForm.value.resetting()
            emit("submit", "resetting")
        }
        /**
         * 搜索事件
         */
        function searchHandle(){
            cdlForm.value.parentSubmit().then((res: any) =>{
                emit("submit", "search", cloneDeep(res))
            })
        }

        return () => (
            <div class={Style.cdl_search}>
                <CdlForm ref={cdlForm} templateTree={props.templateTree} model={props.model} class={Style._search}></CdlForm>
                <div class={Style.search_btn}>
                    <ElButton onClick={resettingHandle}>重置</ElButton>
                    <ElButton onClick={searchHandle} type="success">查询</ElButton>
                    {slots.menu && slots.menu()}
                    {/*<slot name="menu"></slot>*/}
                </div>
            </div>
        )
    }
})
